<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>活动详情 - 人才职业生涯规划平台</title>
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="../css/activity-detail.css">
</head>
<body>
    <div class="app-container">
        <!-- 头部导航 -->
        <header class="header">
            <div class="header-left">
                <a href="javascript:history.back()" class="back-btn">
                    <i class="bi bi-arrow-left"></i>
                </a>
                <h1 class="page-title">活动详情</h1>
            </div>
            <div class="header-right">
                <i class="bi bi-share" id="shareBtn"></i>
                <i class="bi bi-star" id="favoriteBtn"></i>
            </div>
        </header>

        <!-- 主内容区 -->
        <main class="main-content">
            <!-- 活动大图 -->
            <div class="activity-banner">
                <img src="" id="activityImage" alt="活动大图" data-category="activity">
                <div class="activity-status" id="activityStatus"></div>
            </div>

            <!-- 活动基本信息 -->
            <div class="activity-basic-info">
                <h1 class="activity-title" id="activityTitle">活动标题</h1>
                <div class="activity-info-item">
                    <i class="bi bi-calendar-event"></i>
                    <span id="activityTime">2023-04-15 14:00-16:00</span>
                </div>
                <div class="activity-info-item">
                    <i class="bi bi-geo-alt"></i>
                    <span id="activityLocation">活动地点</span>
                </div>
                <div class="activity-info-item">
                    <i class="bi bi-people"></i>
                    <span id="activityParticipants">0人已报名</span>
                </div>
                <div class="activity-tags" id="activityTags">
                    <span class="tag">职业讲座</span>
                </div>
            </div>

            <!-- 活动内容 -->
            <div class="content-card">
                <div class="card-header">
                    <h2 class="section-title">活动详情</h2>
                </div>
                <div class="card-content" id="activityDescription">
                    <p>活动详情内容将在这里显示...</p>
                </div>
            </div>

            <!-- 讲师介绍 -->
            <div class="content-card">
                <div class="card-header">
                    <h2 class="section-title">讲师介绍</h2>
                </div>
                <div class="card-content">
                    <div class="speaker-list" id="speakerList">
                        <div class="speaker-item">
                            <div class="speaker-avatar">
                                <img src="" alt="讲师头像" data-category="avatar">
                            </div>
                            <div class="speaker-info">
                                <h3 class="speaker-name">讲师姓名</h3>
                                <p class="speaker-title">职位头衔</p>
                                <p class="speaker-bio">讲师简介...</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 活动安排 -->
            <div class="content-card">
                <div class="card-header">
                    <h2 class="section-title">活动安排</h2>
                </div>
                <div class="card-content">
                    <div class="schedule-list" id="scheduleList">
                        <div class="schedule-item">
                            <div class="schedule-time">14:00-14:10</div>
                            <div class="schedule-content">
                                <h3>开场致辞</h3>
                                <p>主持人介绍活动背景和嘉宾</p>
                            </div>
                        </div>
                        <div class="schedule-item">
                            <div class="schedule-time">14:10-15:30</div>
                            <div class="schedule-content">
                                <h3>主题分享</h3>
                                <p>嘉宾分享主题内容</p>
                            </div>
                        </div>
                        <div class="schedule-item">
                            <div class="schedule-time">15:30-16:00</div>
                            <div class="schedule-content">
                                <h3>互动问答</h3>
                                <p>参与者提问，嘉宾解答</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 参与须知 -->
            <div class="content-card">
                <div class="card-header">
                    <h2 class="section-title">参与须知</h2>
                </div>
                <div class="card-content" id="activityNotes">
                    <p>1. 请提前10分钟进入活动，准备好相关设备和环境。</p>
                    <p>2. 活动过程中请保持专注，积极参与互动。</p>
                    <p>3. 活动结束后可获得相关资料和证书。</p>
                    <p>4. 如有特殊情况无法参加，请提前取消报名。</p>
                </div>
            </div>

            <!-- 相关推荐 -->
            <div class="content-card">
                <div class="card-header">
                    <h2 class="section-title">相关活动</h2>
                </div>
                <div class="card-content">
                    <div class="related-activities" id="relatedActivities">
                        <div class="related-activity-item">
                            <div class="related-activity-img">
                                <img src="" alt="相关活动" data-category="activity">
                            </div>
                            <div class="related-activity-info">
                                <h3>相关活动标题</h3>
                                <p>2023-04-20 14:00-16:00</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 报名按钮 -->
            <div class="action-btn-container">
                <button class="action-btn" id="registerBtn">立即报名</button>
            </div>
        </main>

        <!-- 报名表单弹窗 -->
        <div class="register-modal" id="registerModal">
            <div class="register-container">
                <div class="register-header">
                    <h2>活动报名</h2>
                    <button class="close-btn" id="closeModalBtn">
                        <i class="bi bi-x-lg"></i>
                    </button>
                </div>
                <div class="register-content">
                    <form id="registerForm">
                        <div class="form-group">
                            <label for="userName">姓名<span class="required">*</span></label>
                            <input type="text" id="userName" name="userName" required placeholder="请输入真实姓名">
                        </div>
                        <div class="form-group">
                            <label for="userPhone">手机号码<span class="required">*</span></label>
                            <input type="tel" id="userPhone" name="userPhone" required placeholder="请输入手机号码">
                        </div>
                        <div class="form-group">
                            <label for="userEmail">电子邮箱<span class="required">*</span></label>
                            <input type="email" id="userEmail" name="userEmail" required placeholder="请输入电子邮箱">
                        </div>
                        <div class="form-group">
                            <label for="userSchool">学校/单位<span class="required">*</span></label>
                            <input type="text" id="userSchool" name="userSchool" required placeholder="请输入所在学校或单位">
                        </div>
                        <div class="form-group">
                            <label for="userMajor">专业/岗位</label>
                            <input type="text" id="userMajor" name="userMajor" placeholder="请输入专业或岗位">
                        </div>
                        <div class="form-group">
                            <label for="userGrade">年级/职级</label>
                            <select id="userGrade" name="userGrade">
                                <option value="">请选择</option>
                                <option value="大一">大一</option>
                                <option value="大二">大二</option>
                                <option value="大三">大三</option>
                                <option value="大四">大四</option>
                                <option value="研一">研一</option>
                                <option value="研二">研二</option>
                                <option value="研三">研三</option>
                                <option value="博士">博士</option>
                                <option value="在职">在职</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="idCard">身份证号码<span class="required">*</span></label>
                            <input type="text" id="idCard" name="idCard" required placeholder="请输入身份证号码">
                        </div>
                        <div class="form-group">
                            <label>上传简历 (PDF格式)</label>
                            <div class="file-upload">
                                <input type="file" id="userResume" name="userResume" accept=".pdf">
                                <div class="upload-button">
                                    <i class="bi bi-cloud-upload"></i>
                                    <span>点击上传</span>
                                </div>
                                <div class="file-name" id="fileName"></div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="userQuestion">参与问题/期望</label>
                            <textarea id="userQuestion" name="userQuestion" rows="3" placeholder="请输入您想在活动中提问的问题或参与期望"></textarea>
                        </div>
                        <div class="form-group checkbox-group">
                            <input type="checkbox" id="agreeTerms" name="agreeTerms" required>
                            <label for="agreeTerms">我已阅读并同意<a href="#" class="text-link">《活动报名协议》</a>和<a href="#" class="text-link">《个人信息保护声明》</a></label>
                        </div>
                        <div class="form-actions">
                            <button type="submit" class="submit-btn">确认提交</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- 底部导航栏 -->
        <footer class="tab-bar">
            <div class="tab-item" data-page="index">
                <i class="bi bi-house-door"></i>
                <span>首页</span>
            </div>
            <div class="tab-item" data-page="discovery">
                <i class="bi bi-compass"></i>
                <span>发现</span>
            </div>
            <div class="tab-item active" data-page="agents">
                <i class="bi bi-calendar-event-fill"></i>
                <span>活动</span>
            </div>
            <div class="tab-item" data-page="profile">
                <i class="bi bi-person"></i>
                <span>我的</span>
            </div>
        </footer>

        <!-- 提示消息 -->
        <div class="toast" id="toast"></div>
    </div>

    <script src="../js/main.js"></script>
    <script src="../js/activity-detail.js"></script>
</body>
</html> 